<template>
  <view class="container">

    <image :src="xhsImage"
           style="height:1291rpx"></image>

    <!--    预约操作-->
    <view class="address_nav_view">
      <view class="address_nav_box pos_f bgc_fff flex-aic flexr-jsc">

        <view class="address_left" @tap="bookingToggle()">
          <!-- <lyz-button  borderColor="#184f2c" backgroundColor="#184f2c" title="立即预约"></lyz-button> -->
		  立即预约
        </view>

        <view class="address_right" @tap="posterToggle()">
         <!-- <lyz-button  borderColor="#e55a25" backgroundColor="#e55a25" title="生成海报"></lyz-button> -->
		        生成海报
        </view>

        <view class="clear"></view>

      </view>
    </view>

    <!-- 预约弹窗 -->
    <uni-popup ref="bookingPopup" background-color="#fff" @change="bookingPopupClose">
      <booking-form @closeBooking="closeBooking" :booking="booking"></booking-form>
    </uni-popup>

    <!-- 海报弹窗-->
    <poster :status="posterStatus" @closePoster="closePoster"></poster>
  </view>
</template>
<script setup>
import {computed, reactive, ref} from "vue";
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup";
import Poster from "./components/poster";
import BookingForm from "./components/bookingForm";
import {useStore} from "../../common/store";
const store = useStore();
const hasLogin = computed(() => store.hasLogin)
const userId = computed(() => store.userId)
const openid = computed(() => store.token)
const xhsPosterType = computed(() => store.xhsPosterType)
const xhsShareUserId = computed(() => store.xhsShareUserId)
const xhsSharePosterId = computed(() => store.xhsSharePosterId)

const xhsImage = ref('http://yytqb.com/wechat_images/xhs.jpg')

const type = ref('bottom');
const bookingPopup = ref(null)

const booking = reactive({
  userId: userId.value,   // 用户编号
  openid: openid.value,   // openid
  username: '',   // 预约用户
  phone: '',      // 手机号码
  storeName: '',  // 预约门店
  yuyueTime: '',  // 预约时间
  xhsPosterType: xhsPosterType.value,
  xhsShareUserId: xhsShareUserId.value,
  xhsSharePosterId: xhsSharePosterId.value
})

const bookingToggle = () => {
  // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
  bookingPopup.value.open('bottom')
}

const posterStatus = ref(false)

const posterToggle = () => {
  // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
  // posterPopup.value.open('bottom')
  posterStatus.value = true
}

// 关闭海报弹出框
const closePoster = (e) =>{
  posterStatus.value = false
}

// 关闭小核酸预约
const closeBooking = (e) =>{
  uni.showToast({
    icon: 'none',
    title: '预约成功！'
  })
  bookingPopup.value.close()
}

const bookingPopupClose = (e) =>{
  booking.username= ''   // 预约用户
  booking.phone= ''    // 手机号码
  booking.storeName= ''  // 预约门店
  booking.yuyueTime= ''  // 预约时间
  booking.deptId=''
}

// 关闭
// bookingPopup.value.close()

</script>

<style lang="scss" scoped>
.container{ width: 100%;}
image {
  width: 100%;
}

page {
  background-color: #f8f8f8;
}
.address_nav_view {
  width: 100%;
}
.address_nav_box {
  width: 100%;
}

.address_left{float: left; width: 50%; height:100rpx; background-color: #184f2c; text-align: center; line-height: 100rpx;color: #fff;}
.address_right{ float: right;width: 50%;height:100rpx;background-color: #e55a25;text-align: center; line-height: 100rpx;color: #fff;}
.clear{clear: both;}
</style>